import React from "react";

const Feedback = () =>{
    const navigate = React.Router.useNavigate();
    const [form] = React.Vant.Form.useForm();
    //存放照片
    const [fileList,setFileList] = React.useState([]);
    
    const handleUpload = (files) => {
        // 注意：这里需要实现真实的上传逻辑，并获取到真实的文件URL
      
        // 假设 `file` 包含了上传文件的信息，并且`files`是一个数组
        const newFiles = files.map(file => ({ url: file.url }));
        const newFileList = fileList.concat(newFiles);
        setFileList(newFileList);
      }


    const onSubmit = () =>{

    }

    const onBack = () =>{
        navigate("/business/index");
    }

    const FormFooter = () =>{
        return (
            <>
            <div style={{ margin: '40px 0px 0' }}>
                <React.Vant.Button
                     color='#ef6382'
                     round nativeType='submit' type='primary' block
                >提交</React.Vant.Button>
            </div>
            </>
        )
    }

    return(
        <>
            <React.Vant.Sticky>
                <React.Vant.NavBar
                    title="意见反馈"
                    leftText="返回"
                    onClickLeft={onBack}
                />
            </React.Vant.Sticky>

            <div className="div_tubian">
                <React.Vant.Form
                    form={form}
                    onFinish={onSubmit}
                    footer={<FormFooter />}
                    labelAlign={'right'}
                    colon
                >

                <div className="biaot">反馈类型</div>
                <ul className="nimen">
                    <li className="no">平台问题</li>
                    <li>付款流程</li>
                    <li>操作问题</li>
                    <li>配送速度</li>
                    <li>服务态度</li>
                    <li>其它问题</li> 
                </ul>

                <div className="biaot biaot_s">反馈内容</div> 
                <div className="nimen_niemn">
                    <React.Vant.Input.TextArea
                      placeholder="请输入您的问题~~~"
                      autoSize={{ minHeight: 130, maxHeight: 200 }}
                      showWordLimit={({ currentCount }) => <span>已经输入{currentCount}个字啦 ✍️</span>}
                    />
                </div>
                <div class="biaot biaot_d">反馈照片</div> 
                <ul class="nimen_ged">
                {fileList.map((file, index) => (
                  <li key={index}>
                    <img src={file.url} alt={`附件-${index}`} />
                  </li>
                ))}
                    <li>
                    <React.Vant.Uploader multiple fileList={fileList} afterRead={handleUpload} />
                    </li>
                </ul>
                </React.Vant.Form>
            </div>
        </>
    )
};

export default Feedback;